<!--授位学员名册详情-->
<template>
  <div class="wrapper-container">
    <div class="all-btn">
      <div class="search-container">
        <div class="search-container-item right20">
          <div class="item-name">专业班次：</div>
          <el-select v-model="dataForm.specialtyClassId" placeholder="请选择" class="width170" size="mini">
            <el-option v-for="item in zybc" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right20">
          <div class="item-name">授位条件类型：</div>
          <el-select v-model="dataForm.bachelorCondition" placeholder="请选择" class="width170" size="mini">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70" @click="initList" >
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
        </div>
      </div>
      <div class="right-btn">
          <div class="search-button color-primary width200 right10" @click="statusInit">
              <span>将选中的学员授位状态初始化</span>
          </div>
          <div class="search-button color-primary width170" @click="openDialog">
              <span>将选中的学员授位处理</span>
          </div>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" 
      :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" 
      class="table-data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="studentCode" label="学号【姓名】" align="center" >
          <template slot-scope="scope">
            <span class="underline" @click="jumpBasic(scope.row.studentCode)">{{scope.row.studentCode}}【{{scope.row.studentName}}】</span>
          </template>
        </el-table-column>
        <el-table-column prop="specialtyClassName" label="专业班次" align="center" width="180"></el-table-column>
        <el-table-column prop="allCourseCount" label="课程门数【学分】" align="center" width="180"> 
          <template slot-scope="scope">{{scope.row.allCourseCount}}【{{scope.row.allCourseScoreCount}}】</template>
        </el-table-column>
        <el-table-column prop="courseName" label="选修门数【学分】" align="center" width="180">
          <template slot-scope="scope">{{scope.row.opCourseCount}}【{{scope.row.opCourseScoreCount}}】</template>
        </el-table-column>
        <el-table-column prop="discontentReasonList" label="不满足条件原因" align="center" > 
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.discontentReasonList" :key="index">{{item.conditionName}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="xyRewardInfoList" label="奖励" align="center" width="180">
          <template slot-scope="scope">
            <p class="underline" v-for="(item,index) in scope.row.xyRewardInfoList" :key="index" @click="jcDetail(scope.row.studentCode,1)">{{item.name}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="xyPunishmentInfoList" label="惩罚" align="center" width="180">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.xyPunishmentInfoList" class="underline" :key="index" @click="jcDetail(scope.row.studentCode,2)">{{item.name}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="degree" label="授位结论" align="center"></el-table-column>
        <el-table-column prop="degCertificateNo" label="学位证书编号" align="center"></el-table-column>        
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
    <div class="pagination-block">
      <el-pagination prev-text="上一页" next-text="下一页" v-if="total>50" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total" >
      </el-pagination>
    </div>
    <!-- 毕业日期设置 -->
    <el-dialog title="授位日期设置" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
        <div class="dialogForm">
          <el-form  ref="dialogForm" :model="dialogForm" :rules="rulesDialog" class="demo-ruleForm">
            <div class="my-form-item-label">授位日期</div>
            <el-form-item  prop="graduationTime">
              <div class="my-form-item-value">
                <el-date-picker  v-model="dialogForm.graduationTime" type="date" value-format="yyyy-MM-dd"></el-date-picker>
              </div>
            </el-form-item>
          </el-form>
          <div class="btnGroup">
            <span class="small-btn edit-yellow" style="margin-right:60px" @click='confirmBtn'>保存</span>
            <span class="small-btn delete-red" @click='dialogVisible=false'>取消</span>
          </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getZYBC,getSWDetail,getSWStatus,getSWStatusInit} from "@/api/student";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        bachelorCondition:1,//授位条件 1.满足授位条件 2.不满足授位条件
        specialtyClassId:'',
        pageNo:1
      },
      dialogForm:{graduationTime:''},
      total:1,
      dialogVisible:false,
      zybc:[],
      type:1,
      typeList:[
        {label:'满足授位条件',value:1},
        {label:'不满足授位条件',value:2},
      ],
      IDS:[],
      rulesDialog: {graduationTime: [ { required: true, message: '请选择时间', trigger: 'change' }]},
      tableData: [],
    };
  },
  mounted(){
    this.dataForm.specialtyClassId = this.$route.query.id
    this.getZYinfo();
    this.initList()
  },
  methods: {
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.studentCode);
    },
    //获取专业信息
    async getZYinfo(){
      let res = await getZYBC()
      if(res.code == 200){
        if(res.data.length>0){
          //专业
          let data = res.data.map(item=>{
            return {
              label:item.className,
              value:item.id,
            }
          })
          this.zybc = data;
        }
      }
    },
    //初始化表格
    async initList(){
      let res = await getSWDetail(this.dataForm);
      if(res.code){
        this.tableData = res.data;
        this.total = res.total;
      }
    },
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    jumpBasic(code){
      //跳转到学员-个人信息
      this.$router.push({
        path:'/student/studentStatus/infoSearch',
        query:{
            studentCode:code
        }
      })
    },
    //奖惩详情
    jcDetail(rwid,type){
      //跳转到学员-个人信息
      let query = type == 1?{rwid:rwid}:{puid:rwid}
      this.$router.push({
        path:type == 1?'student/disciplinaryInfo/reward/editInfo':'/student/disciplinaryInfo/punishment/editInfo',
        query:{
          query,
          type:2,
        }
      })
    },
    //学位状态初始化
    async statusInit(){
      if(this.IDS.length>0){
        let res = await getSWStatusInit(this.IDS);
        if(res.code == 200){
          this.IDS = [];
          this.dataForm.pageNo = 1
          this.initList();
          this.$message.success('操作成功！');
        }
      }else{
        this.$message({
          message: '请选择要操作的数据！',
          type: 'warning'
        });
      } 
    },
    openDialog(){
      if(this.IDS.length>0){
        this.dialogVisible = true;
        this.dialogForm.graduationTime = '';
        this.$nextTick(()=>{
          this.$refs.dialogForm.resetFields();
        })
      }else{
        this.$message({
          message: '请选择要操作的数据！',
          type: 'warning'
        });
      }
    },
    //给选中的学员授位
    confirmBtn(){
      this.$refs['dialogForm'].validate(async(valid) => {
        if (valid) {
          let params = {
            givenDegreeTime:this.dialogForm.graduationTime,
            studentCodes:this.IDS
          }
          let res = await getSWStatus(params);
          if(res.code == 200){
            this.$message('操作成功！');
            this.IDS = [];
            this.dataForm.pageNo = 1
            this.initList();
            this.$message('操作成功！');
          }
        } 
      });
      
    },
    importExcel(){
      Axios({
        method: 'get',
        url: this.$store.state.studentUrl.baseUrl+'/bachelor/exportData',
        params:this.dataForm,
        headers: {'Content-Type': 'application/octet-stream' },
            responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '授位学员详情数据.xlsx');
      }); 
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
}
 /deep/.demo-ruleForm{
    .el-form-item{
        margin-bottom: 0!important;
        width: 100%;
    }
    .el-form-item__error {left: 20px; }
    }
.underline{
  text-decoration: underline;
  color:#054CA7 ;
  cursor: pointer;
}
.right20{margin-right: 20px;}
.right10{margin-right: 10px;}
.width170{width: 170px!important;}
.width70{width: 70px;}
.width200{width: 226px;}
.all-btn{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .right-btn{display: flex;}
}
.btnGroup{
    display: flex;
    margin-top: 29px;
    justify-content: center;
    /deep/.small-btn{margin: 0;}
  }
  .edit-yellow{
    color: #F3B815;
    background: #FFF6EF;
    border: 1px solid #F3B815;
    width: 60px;
  }
  .delete-red{
    color: #FA5339;
    background: #FFEFEF;
    border: 1px solid #FA5339;
    width: 60px;
  }
  .dialogForm{
    .my-form-item-label{
      width: 214px;
      line-height: 108px;
      background:rgba(0, 76, 167, 0.1);
      border-radius: 5px 0px 0px 5px;
      color: #004CA7;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .el-form{
      display: flex;
      align-items: center;
      width: 639px;
      height: 108px;
      margin: 0 auto;;
      border: 1px solid #004CA7;
      border-radius: 4px;
      .my-form-item-value{
        padding-left: 20px;
        /deep/.el-input__inner{
          height: 65px;
          line-height: 65px;
        }
      }
    }
  }
</style>
